<template>
  <div style="height: 100%">
    <!-- iframe设置的margin，不会造成外边距重叠 -->
    <move-container
      @mouse-down="onMousedown"
      @mouse-cancel="onCancel"
      @mouse-move="onMove"
      @mouse-up="onUp"
      @click="onSelect"
      id="Tabs"
      :style="desktopStyle"
    >
      <window @exit="exitHandler" :type="app_platform" :src="app_url"></window>
      <div :style="backgroundSymbolStyle" class="background-box">
        <div class="background" :style="backgroundStyle">
          <img
            @dragstart.prevent
            :src="backgroundUrl"
            width="100%"
            height="100%"
            alt=""
          />
        </div>
      </div>
      <!-- launch -->
      <launch />
      <!-- tabbar -->
      <tabbar />
    </move-container>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { contain } from "../utils/utils";
import launch from "../component/launch.vue";
import Tabbar from "../component/tabbar.vue";
import MoveContainer from "../component/moveContainer.vue";
import Window from '../component/window.vue';
export default {
  components: { launch, Tabbar, MoveContainer, Window },
  name: "Tabs",
  data() {
    return {
      cursorActive: false, // 当鼠标拖拽item进入tabbar，并且获取具体位置时，为true。还用来作为判断鼠标是否在tabbar中（这个在tabbar中，并不是指鼠标进入tabbar范围，而是指进入tabbar范围并且使item获得具体位置）
      cursorSit: null, // 用来记录当前拖拽的item，放置在tabbar的位置。
      pageX: 0, //保存鼠标的上一个x，用来判断鼠标向右还是向左。
      cursorTabbarActive: true, // 是否拖拽tabbar中的item在tabbar中。
      cursorTabbarSit: null, // tabbar中被拖拽的item的位置。
      app_url: "",
      app_platform: "",
    };
  },
  computed: {
    ...mapState([
      "backgroundUrl",
      "items",
      "activeIndex",
      "launchActive",
      "tabbarAttribute",
      "tabbarItems",
    ]),
    desktopStyle() {
      const style = {
        background: `url(${this.backgroundUrl}) center / 100% 100% no-repeat`,
      };
      return style
    },
    // 控制背景是否需要模糊
    backgroundStyle() {
      if (this.launchActive) {
        return {
          filter: "blur(10px)",
          transform: "scale(1.1)"
        };
      } else {
        return {};
      }
    },
    // 由于filter边缘会半透明，所以在顶部元素的背景中放入该图片，消除边缘为其它颜色的问题。
    backgroundSymbolStyle() {
      const style = {
        background: `url(${this.backgroundUrl}) center center / 100% 100% no-repeat`,
      };
      return style
    },
  },
  mounted() {
    this.$store.dispatch('init')
  },
  methods: {
    ...mapMutations([
      "SWITCH_LAUNCH_ACTIVE",
      "INSERT_TABBAR_ITEMS",
      "REMOVE_TABBAR_ITEMS",
    ]),
    exitHandler() {
      this.app_url = ''
      this.app_platform = ''
    },
    onSelect(data) {
      this.app_url = data.app_url;
      this.app_platform = data.app_platform;
      this.$store.dispatch('offTabbar')
    },
    onUp(data) {
      this.$store.dispatch("offDrag");
      if (!this.cursorTabbarActive) {
        this.cursorTabbarActive = true;
        this.REMOVE_TABBAR_ITEMS(this.cursorTabbarSit);
        this.cursorTabbarSit = null;
        this.$nextTick(() => this.$store.dispatch('initTabbar'));
        return;
      }
      if (Number.isInteger(this.cursorSit) && !this.cursorActive) {
        this.REMOVE_TABBAR_ITEMS(this.cursorSit);
        this.cursorSit = null;
      } else if (Number.isInteger(this.cursorSit) && this.cursorActive) {
        this.REMOVE_TABBAR_ITEMS(this.cursorSit);
        const index = this.tabbarItems.findIndex((val) => {
          if (val.app_name === data.app_name) {
            return true;
          }
        });
        if (index === -1) {
          const { app_name, app_url, imageUrl } = data;
          this.INSERT_TABBAR_ITEMS({
            item: {
              app_name,
              app_url,
              imageUrl,
              tabbar: true,
            },
            sit: this.cursorSit,
          });
        }
      }
      this.$nextTick(() => this.$store.dispatch('initTabbar'));
      this.cursorSit = null;
    },
    onMove(e, data) {
      const { x, y, width, height } = this.tabbarAttribute.container;
      // 在tabbar中拖拽
      if (data && data.tabbar) {
        // 拖出tabbar时
        if (!contain(x, y, width, height, e.pageX, e.pageY)) {
          this.cursorTabbarActive = false;
          const index = this.tabbarItems.findIndex((val) => {
            if (val.app_name === data.app_name) {
              return true;
            }
          });
          if (index === -1) {
            return;
          }
          this.cursorTabbarSit = index;
        } else {
          // 在tabbar中时
          this.cursorTabbarSit = null;
          this.cursorTabbarActive = true;
        }
        return;
      }
      if (contain(x, y, width, height, e.pageX, e.pageY)) {
        if (!this.cursorActive) {
          for (let i = 0; i < this.tabbarAttribute.items.length; i++) {
            const item = this.tabbarAttribute.items[i];

            const leftEdge = item.x + item.width / 2;
            const rightEdge =
              this.tabbarAttribute.items.length === i + 1
                ? 99999999
                : this.tabbarAttribute.items[i + 1].x + item.width / 2;
            if (e.pageX >= leftEdge && e.pageX <= rightEdge) {
              this.cursorActive = true;
              // 注意。。。tabbarAttribute.items.length - tabbarItems.length === 1
              this.INSERT_TABBAR_ITEMS({
                item: {},
                sit: i,
              });
              this.cursorSit = i;
              this.$nextTick(() => this.$store.dispatch('initTabbar'));
              break;
            }
          }
        } else {
          if (e.pageX - this.pageX > 0) {
            console.log(this.cursorSit)
            const item = this.tabbarAttribute.items[this.cursorSit + 2];
            const rightEdge =
              this.cursorSit + 2 >= this.tabbarAttribute.items.length
                ? 99999999
                : item.x + item.width / 2;
            if (e.pageX >= rightEdge) {
              this.REMOVE_TABBAR_ITEMS(this.cursorSit);
              this.cursorActive = true;
              // 注意。。。tabbarAttribute.items.length - tabbarItems.length === 1
              this.INSERT_TABBAR_ITEMS({
                item: {},
                sit: this.cursorSit + 1,
              });
              this.cursorSit++;
              this.$nextTick(() => this.$store.dispatch('initTabbar'));
            }
          } else if (e.pageX - this.pageX < 0) {
            const item = this.tabbarAttribute.items[this.cursorSit];
            const leftEdge =
              this.cursorSit <= -1 ? -99999999 : item.x + item.width / 2;
            if (e.pageX <= leftEdge) {
              this.REMOVE_TABBAR_ITEMS(this.cursorSit);
              this.cursorActive = true;
              // 注意。。。tabbarAttribute.items.length - tabbarItems.length === 1
              this.INSERT_TABBAR_ITEMS({
                item: {},
                sit: this.cursorSit - 1,
              });
              this.cursorSit--;
              this.$nextTick(() => this.$store.dispatch('initTabbar'));
            }
          }
        }
      } else {
        if (Number.isInteger(this.cursorSit)) {
          this.REMOVE_TABBAR_ITEMS(this.cursorSit);
          this.$nextTick(() => this.$store.dispatch('initTabbar'));
          this.cursorSit = null;
        }
        this.cursorActive = false;
      }
      this.pageX = e.pageX;
    },
    onMousedown() {
      this.$store.dispatch("upDrag");
    },
    onCancel() {
      this.$store.dispatch("offDrag");
      this.SWITCH_LAUNCH_ACTIVE(false);
    },
  },
};
</script>

<style scoped>
#Tabs {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
#Tabs .background-box {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 10;
}
#Tabs .background {
  height: 100%;
  width: 100%;
  position: absolute;
  transition: filter 0.2s, transform 0.2s;
  /* 通过launchActive来控制模糊 */
  /* filter: blur(10px); */
  /* 使用filter后，边缘处会出现半透明现象，放大后可以消除该影响 */
  /* transform: scale(1.1); */
}
#Tabs .tab {
  z-index: 9999;
  width: 100%;
  height: 100%;
}
#Tabs .tab .tab-item {
  height: 100%;
  width: 100%;
}

#Tabs .masking {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100vw);
  height: calc(100vh);
  z-index: 9999;
}

.TabBar {
  display: flex;
  padding: 0 18px;
  flex-direction: row;
  height: 80px;
  justify-content: left;
  align-items: center;
  width: auto;
  position: absolute;
  bottom: 0;
  left: 50%;
  border-radius: 10px;
  border: transparent;
  box-shadow: 2px 7px 10px 0 rgba(0, 0, 0, 0.1),
    2px 11px 11px 0 rgba(0, 0, 0, 0.1), 2px 6px 8px 0 rgba(0, 0, 0, 0.08),
    2px 5px 8px 0 rgba(252, 22, 0, 0.05);
  background-color: rgba(247, 244, 244, 0.117);
  transform: translateY(70px);
  transition: transform 0.3s;
  z-index: 10000;
  /* -webkit-backdrop-filter: saturate(180%) blur(20px); */
  /* backdrop-filter: saturate(180%) blur(20px); */
}
.TabBar:hover {
  transform: translateY(0px);
}
.TabBar .item {
  width: 64px;
  height: 64px;
  margin-left: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.TabBar .item .name {
  background-color: rgb(115, 109, 109);
  color: white;
  padding: 4px;
  border-radius: 4px;
  top: -48px;
  text-align: center;
  position: absolute;
  white-space: nowrap;
}
.TabBar .item .operate {
  background-color: rgba(115, 109, 109, 0.6);
  color: white;
  padding: 4px 20px;
  border-radius: 4px;
  /* text-align: center; */
  margin-top: -64px;
  display: flex;
  width: 150px;
  flex-direction: column;
}
.TabBar .item .operate .operate-item:hover {
  background-color: rgb(51, 118, 173);
}
.TabBar .item img {
  height: 100%;
  width: 100%;
  user-select: none;
}
</style>
